<template>
  <div>
    <input type="text" v-model="searchValue" :placeholder="placeholder">
    <span class="bottom" :style="{'background-color':borderColor}"></span>
    <span class="right" :style="{'background-color':borderColor}"></span>
    <span class="top" :style="{'background-color':borderColor}"></span>
    <span class="left" :style="{'background-color':borderColor}"></span>
  </div>
</template>

<script>
export default {
  name: 'TraceInput',
  props: {
    borderColor: {
      type: String,
      default: '#fc2f70'
    },
    placeholder: {
      type: String,
      default: '输入点什么...'
    }
  },
  data () {
    return {
      searchValue: ''
    }
  },
  watch: {
    'searchValue': function (newSearchValue) {
      this.$emit('search', this.searchValue)
    }
  },
  created () {},
  mounted () {},
  methods: {}
}
</script>

<style lang="stylus" scoped>
  div {
    position: relative;
  }

  input {
    font-size: inherit;
    font-family: inherit;
    padding 0 4px
    height 26px
    line-height 26px
    border: 1px solid #dcdfe6
    transition: background-color 0.3s ease-in-out;
  }

  input:focus {
    outline: none;
  }

  input::placeholder {
    // color: hsla(0, 0%, 100%, 0.6);
  }

  span {
    position: absolute;
    // background-color: #fc2f70;
    transition: transform 0.1s ease;
  }

  .bottom,
  .top {
    height: 1px;
    left: 0;
    right: 0;
    transform: scaleX(0);
  }

  .left,
  .right {
    width: 1px;
    top: 0;
    bottom: 0;
    transform: scaleY(0);
  }

  .bottom {
    bottom: 0;
    transform-origin: bottom right;
  }

  input:focus ~ .bottom {
    transform-origin: bottom left;
    transform: scaleX(1);
  }

  .right {
    right: 0;
    transform-origin: top right;
    transition-delay: 0.05s;
  }

  input:focus ~ .right {
    transform-origin: bottom right;
    transform: scaleY(1);
  }

  .top {
    top: 0;
    transform-origin: top left;
    transition-delay: 0.15s;
  }

  input:focus ~ .top {
    transform-origin: top right;
    transform: scaleX(1);
  }

  .left {
    left: 0;
    transform-origin: bottom left;
    transition-delay: 0.25s;
  }

  input:focus ~ .left {
    transform-origin: top left;
    transform: scaleY(1);
  }
</style>
